<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html>
	<!--<![endif]-->

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>播放大厅-因酷在线教育软件-中国在线教育平台第一品牌</title>
		<meta name="author" content="INXEDU(http://www.inxedu.com)" />
		<meta name="keywords" content="INXEDU,在线教育,网校搭建,网校,网络教育,远程教育,云网校,在线学习,在线考试" />
		<meta name="description" content="inxedu是一家专注“在线教育平台”的互联网公司，在国内属顶级在线教育解决方案提供商中的领跑者。为大、中型客户提供领先的在线教育平台方案服务。" />
		<link rel="shortcut icon" href="/inxedu/favicon.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="../../static/inxweb/css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../static/inxweb/css/theme.css">
		<link rel="stylesheet" type="text/css" href="../../static/inxweb/css/global.css">
		<link rel="stylesheet" type="text/css" href="../../static/inxweb/css/web.css">
		<link rel="stylesheet" href="../../css/jsmodern.min.css">
		<link href="../../static/inxweb/css/mw_320_768.css" rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 768px)">
		<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
		<!--<script src="http://vod.baofengcloud.com/html/script/bfcloud.js?v=2"></script>-->
		<script src="../../js/jquery.min.js"></script>
		<script src="../../js/jsmodern.min.js"></script>
		<script src="../../js/head.js"></script>
		<!--封装好的视频布局样式-->
		<style>
			#video {
				width: 1100px;
				height: 534px;
				margin: 0 auto;
				position: relative;
			}
			
			#video video {
				width: 100%;
				height: 100%;
				object-fit: fill;
			}
			
			.VideoBtn {
				position: absolute;
				left: 50%;
				top: 50%;
				display: block;
				width: 70px;
				height: 70px;
				margin-left: -35px;
				margin-top: -35px;
				cursor: pointer;
				z-index: 10;
			}
		</style>
		<!--视频插件调用方法-->
		<script>
			
			$(function() {
				var studyHistory = "";
				//视频
				jsModern.video("#video");
				//播放视频
				$(".VideoBtn").click(function() {
					var video = document.getElementById("videoShow");
					video.play();
						
					$('.VideoBtn').hide();
				})
				//监听视频的播放状态
				var video = document.getElementById("videoShow");
				video.oncanplay = function() {
					$(".VideoBtn").show();
					//$("#video").attr("poster","");
				}
				//视频播放事件
				video.onplay = function() {
					$("#videoShow").attr("poster", "");
					$(".VideoBtn").hide();
					var num = new Number();
					
					$.ajax({
						type: "get",
						url: "http://localhost:9095/user/getStudyHistory",
						async: false,
						headers:{
							"token":localStorage.getItem("token")
						},
						data: {
							"kpointId": app.playCourseKpoint.kpointId,
							"userId": app.eduUser.userId,
							"courseId":localStorage.getItem("courseId"),
							"courseName": app.course.courseName,
							"kpointName": app.playCourseKpoint.name,
						},
						success: function(msg) {
							console.log(msg.data)
							studyHistory = msg.data;
						}
					});
//					console.log(studyHistory.currentTime)
					video.currentTime = studyHistory.currentTime;

				};
				video.onplaying = function() {
					$(".VideoBtn").hide();
				};

				//视频暂停事件
				video.onpause = function() {
					$(".VideoBtn").show();
					console.log(video.currentTime)
				};
				//点击视频周围暂停播放图片出现
				video.onclick = function() {
					if(video.paused) {
						$(".VideoBtn").hide();
						video.play();
					} else {
						$(".VideoBtn").show();
						video.pause();
					}
				};
				//播放时长
				var totalTime = 0;
				//视频进度监听
				video.ontimeupdate = function() {
					var time = Math.floor(video.currentTime);
					if(time>0&&time>totalTime) {
						$.ajax({
							type: "post",
							url: "http://localhost:9095/user/addStudyHistory",
							async: true,
							headers:{
								"token":localStorage.getItem("token")
							},
							data: {
								"currentTime": time,
								"courseId": app.playCourseKpoint.courseId,
								"userId": app.eduUser.userId,
								"kpointId": app.playCourseKpoint.kpointId,
								"courseName": app.course.courseName,
								"kpointName": app.playCourseKpoint.name,
								"id": studyHistory.id
							}
						});
					}
					totalTime=time;
				}
			})
			//获取当前播放时间

			//页面刷新、关闭、跳转事件
		</script>
	</head>

	<body>
		<div class="of" style="background-color: #f0f0f0" id="app">
			<div class="u-body v-body">
				<!-- /学习大厅 主体 开始 -->
				<div class="p-h-v-wrap">
					<div class="pr15">
						<section id="p-h-box" class="p-h-box">
							<!-- /playing hall header begin-->
							<header class="p-h-header">
								<section class="p-h-head">
									<aside class="p-h-goback">
										<a href="javascript:void(0)" onclick="history.go(-1)" title=""><em class="icon24">&nbsp;</em><tt class="c-fff fsize14 f-fM vam">返回</tt></a>
									</aside>
									<h2 class="p-h-title"><span class="c-fff" id="contentTitle">{{course.courseName}}</span></h2>
									<aside class="pa" style="right: 40px;top: 22px;">
										<span class="vam dpBtn"><em class="icon18 dpIcon"></em><a class="c-fff vam" title="关灯" onclick="" href="javascript:void(0)">关灯</a></span>
									</aside>
								</section>
							</header>
							<!-- /playing hall header end-->
							<!-- /学习进度条 开始-->
							<div class="p-h-s-bar">
								<div class="time-bar-wrap">
									<div title="已学0%" class="lev-num-wrap">
										<aside class="lev-num-bar">
											<p><span class="lev-num"><big>已学习：0%</big></span></p>
										</aside>
									</div>
								</div>
							</div>
							<!-- /学习进度条 结束-->

							<!--<div class="p-h-video of">
								<section class="p-h-video-box" id="videoPlay">-->
							<div>
								<div id="video">
									<video id="videoShow" ref="video">
										<source :src="videoUrl" type="video/mp4">
									</video>
									<!--当前播放时间-->
									<!--<section class="jsmodern-video-panel">-->
									<!--<span class="jsmodern-video-start"></span>-->
									<span class="VideoBtn"><img src="../../images/bo1.png"></span>
								</div>
								<!--</section>-->
								<section class="p-h-video-tip">
									<img src="../../static/inxweb/img/v-loading.gif">
									<p class="hLh20"><span style="color: #A6B8CC;">加载中...</span></p>
								</section>
							</div>
							<!-- /播放器位置 -->
							<aside class="p-h-r-ele">
								<section class="p-h-r-wrap">
									<section class="p-h-m-tp">
										<div id="o-c-btn" class="o-c-btn">
											<a href="javascript: void(0)" title="展开"><em class="icon14 o-c-icon">&nbsp;</em></a>
										</div>
										<aside class="p-h-rSc">
											<section class="kcShare pr fl hand vam">
												<tt><em class="icon18 shareIcon"></em><span class="vam c-fff f-fM">分享</span></tt>
												<div id="bdshare" class="bdsharebuttonbox">
													<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
													<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
													<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
													<a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
													<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
													<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
												</div>
												<script>
													window._bd_share_config = {
														"common": {
															"bdSnsKey": {},
															"bdText": "",
															"bdMini": "2",
															"bdMiniList": false,
															"bdPic": "",
															"bdStyle": "0",
															"bdSize": "16"
														},
														"share": {}
													};
													with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
												</script>
											</section>
											<span class="ml10 vam sc-end"><em class="icon18 scIcon"></em><a class="c-fff vam" title="已收藏" onclick="" href="javascript:void(0)">已收藏</a></span>
										</aside>
									</section>
									<section class="p-h-r-title mt10">
										<ol id="p-h-r-title">
											<li class="current">
												<a href="javascript: void(0)" title="课程目录">课程目录</a>
											</li>
											<li>
												<a href="javascript: void(0)" title="课程笔记" onclick="if($(this).parent('li').hasClass('current')){return false;} queryNote();">课程笔记</a>
											</li>
										</ol>
										<div class="clear"></div>
									</section>
									<div id="p-h-r-cont">
										<section class="p-h-r-menu mt10">
											<div class="lh-menu-wrap">
												<menu id="lh-menu" class="lh-menu">
													<ul>

														<!-- 文件目录 -->
														<li class="lh-menu-stair" v-for="(point,index) in parent" v-if="point.parentId==0">
															<a href="javascript: void(0)" title="point.name " @click="show(index)">
																<span class="fr"><em class="icon14 m-tree-icon">&nbsp;</em></span><em class="lh-menu-i-1 icon24 mr5"><font>{{index+1}}</font></em> {{point.name}}
															</a>
															<ol class="lh-menu-ol" style="display: none;" :id="index">

																<li class="lh-menu-stair" v-for="item in kpoints" v-if="item.parentId==point.kpointId">
																	<a title="" @click="play(item)" href="javascript:void(0)">
																		<span class="fr">
																					<tt class="free-icon vam mr10" v-show="item.isFree==true">免费试听</tt>
																					<em class="lh-p-icon icon14 ml5">&nbsp;</em>{{item.playTime}}
																				</span>
																		<em class="lh-menu-i-2 icon14 mr5">&nbsp;</em>{{item.name}}
																	</a>
																</li>
															</ol>
														</li>

													</ul>
												</menu>
											</div>
										</section>
										<input type="hidden" v-model="currentTime" />
										<!-- /课程目录 -->
										<section class="undis">
											<div class="mt10">
												<!-- 课程笔记 位置 -->
												<textarea name="notesContext" onkeyup="$('#notContextId').hide();" id="notesContextId" style="width:368px;"></textarea>
												<section class="mt5 clearfix">
													<span class="fr">
												<tt class="mr5 c-orange" style="display: none;" id="notContextId"></tt>
												<a href="javascript: void(0)" onclick="addNotest()" title="保存" class="lh-reply-btn">保存</a>
											</span>
												</section>
											</div>
										</section>
										<!-- /课程笔记 -->
									</div>
								</section>
							</aside>
							<!-- /菜单+IM位置 -->
						</section>
					</div>
				</div>
				<!-- /学习大厅 主体 结束 -->
				<section class="pl15 pr15">
					<div class="mt10 c-infor-box">
						<article class="fl col-7">
							<section class="mr30">
								<div class="i-box">
									<div>
										<section class="c-infor-tabTitle c-tab-title">
											<a class="current" title="课程评论" href="javascript:void(0);" onclick="comment(1,this)">课程评论</a>
											<a title="精彩评论" href="javascript:void(0);" onclick="comment(2,this)">精彩评论</a>
										</section>
									</div>
									<article class="ml10 mr10 commentHtml"></article>
								</div>
							</section>
						</article>
						<aside class="fl col-3">
							<div class="i-box">
								<div>
									<section class="c-infor-tabTitle c-tab-title">
										<a title="" href="">猜你想学</a>
									</section>
									<section class="no-data-wrap">
										<em class="icon30 no-data-ico">&nbsp;</em>
										<span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
									</section>
								</div>
							</div>
							<div class="i-box mt20">
								<div id="courseLearnedUserDiv">
									<section class="c-infor-tabTitle c-tab-title">
										<a title="" href="">学过此课的人（0）</a>
									</section>
									<section class="no-data-wrap"><em class="icon30 no-data-ico">&nbsp;</em><span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span></section>
								</div>
							</div>
						</aside>
						<div class="clear"></div>
					</div>
				</section>
			</div>
		</div>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/axios.min.js"></script>
		<script>
			//			$(function() {
			//
			//				//页面关闭、刷新前插入播放记录
			//				window.addEventListener("beforeunload", function(event) {
			//					var video = document.getElementById("videoShow");
			//					var courseStudyhistory = new FormData();
			//					courseStudyhistory.append('userId', eduUser.userId);
			//					courseStudyhistory.append("courseId", app.playCourseKpoint.courseId);
			//					courseStudyhistory.append("currentTime", video.currentTime);
			//					courseStudyhistory.append("kpointId", app.playCourseKpoint.kpointId);
			//					courseStudyhistory.append("courseName", app.course.courseName);
			//					courseStudyhistory.append("kpointName", app.playCourseKpoint.name);
			//					//				edu.append("token",localStorage.getItem("token"));
			//					navigator.sendBeacon("http://localhost:9095/user/addStudyHistory", courseStudyhistory);
			//					event.returnValue = '';
			//				});
			//			})

			var app = new Vue({
				el: "#app",
				data: {
					course: "",
					parent: [],
					kpoints: [],
					videoUrl: "",
					playCourseKpoint: "",
					eduUser: "",
					currentTime: 0
				},
				created: function() {
					this.eduUser = this.$options.methods.check();
					var that = this;
					var courseId = localStorage["courseId"];
					//					alert(that.eduUser.userId)
					axios.defaults.headers.common["token"] = localStorage.getItem("token");
					axios.get("http://localhost:9095/user/courseVideo/init", {
						params: {
							"id": courseId
						}
					}).
					then(function(response) {
							that.course = response.data.data.course;
							that.kpoints = response.data.data.kpoints;
							that.kpoints.forEach(function(x, y) {
								if(x.parentId == 0) {
									that.parent.push(x)
								}
							})
							that.playCourseKpoint = that.kpoints[1];
							that.$refs.video.src = that.kpoints[1].videoUrl;

						},
						function(error) {
							alert("错误")
						})
				},
				methods: {
					play: function(item) {
						this.$refs.video.src = item.videoUrl
						this.playCourseKpoint = item;
					},
					show: function(i) {
						var ol = document.getElementById(i);
						if(ol.style.display == 'none') {
							ol.style.display = 'block';
						} else {
							ol.style.display = 'none';
						}
					},
					check: function() {
						var token = localStorage["token"];
						var that = this;
						if(token != "null" && token != "" && token != null) {
							var json = islogins(token);
							if(json != "null" && json != "" && json != null) {
								if(json.code == 200) {
									var obj = json.data;
									return obj;
							
								} else {
									alert("token错误");
									location.href = "../menu/index.html"
								}
							} else {
								alert("获取登录信息失败");
							}
						} else {
							alert("未登录!");
							location.href = "../menu/Login.html"
						}
					}
				}
			})
		</script>
		<!-- 公共底引入 -->
		<footer id="footer">
			<section class="container">
				<div class="">
					<h4 class="hLh30">
				<span class="fsize18 f-fM c-999">友情链接</span>
			</h4>
					<ul class="of flink-list">
						<li>
							<a href="http://www.xyqhit.com" title="三阳科技" target="_blank">三阳科技</a>
						</li>
					</ul>
					<div class="clear"></div>
				</div>
				<div class="b-foot">
					<section class="fl col-7">
						<section class="mr20">
							<section class="b-f-link">
								<a href="/front/helpCenter?id=193" title="关于我们" target="_blank">关于我们</a>|
								<a href="/front/helpCenter?id=194" title="联系我们" target="_blank">联系我们</a>|
								<a href="#" title="成功案例" target="_blank">成功案例</a>|
								<a href="/front/helpCenter" title="帮助中心" target="_blank">帮助中心</a>|
								<span>服务热线：400-006-5079</span> <span>Email：xiejinlong@inxedu.com</span>
							</section>
							<section class="b-f-link mt10">
								<span>©2010-2015 INXEDU有限公司 版权所有 京ICP备15017521号</span>
							</section>
						</section>
					</section>
					<aside class="fl col-3 tac mt15">
						<section class="gf-tx">
							<span><img src="../../static/inxweb/img/wx-icon.png" alt=""></span>
							<div class="gf-tx-ewm">
								<img src="../../images/upload/image/20150908/1441801228269.png" alt="">
							</div>
						</section>
						<section class="gf-tx">
							<span><img src="../../static/inxweb/img/wb-icon.png" alt=""></span>
							<div class="gf-tx-ewm">
								<img src="../../images/upload/image/20150908/1441801298938.png" alt="">
							</div>
						</section>
					</aside>
					<div class="clear"></div>
				</div>
			</section>
		</footer>
		<div class="r-fixed-wrap">
			<ul class="r-fixed-ul">
				<li id="goTopBtn" class="undis">
					<a href="javascript: void(0)" title="返回顶部" class="bg-orange">
						<em class="r-f-icon-3">&nbsp;</em><span>返回顶部</span>
					</a>
				</li>
				<li class="foot-zixun">
					<a href="" title="在线咨询" class="bg-orange">
						<em class="r-f-icon-1">&nbsp;</em><span>在线咨询</span>
					</a>
				</li>
				<li class="foot-zixun">
					<a href="" title="扫描关注" class="bg-orange">
						<em class="r-f-icon-2">&nbsp;</em><span>扫描关注</span>
					</a>
				</li>
			</ul>
		</div>
		<!-- 公共底引入 -->
		<script type="text/javascript" src="../../static/common/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="../../static/common/jquery-1.11.1.min.js"></script>

		<script type="text/javascript" src="../../static/common/webutils.js"></script>
		<script type="text/javascript" src="../../static/inxweb/js/common.js"></script>
		<script src="../../static/inxweb/comment/comment.js" type="text/javascript"></script>
		<!-- 评论js -->
		<script type="text/javascript" src="../../js/kindeditor-all.js"></script>
		<!--<script type="text/javascript" src="../../static/inxweb/play/playVideo.js"></script>-->

		<script>
			//评论课程id
			var otherId = '10';
			//评论类型,类型2为课程
			var type = 2;
			var currentKpointId = "0"; //当前播放视频id(没有视频节点默认为零)
			var isok = "true"; //是否可以播放
			var message = ""; //提示信息
			var countPlayTimeOut = '15'; //播放后记录播放次数的延时
			var studyPercent = "200"; //学习进度百分比
		</script>
	</body>

</html>